<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2018/2/3
  Time: 18:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>资讯列表</title>
    <jsp:include page="../common/portal-head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/page.css">
    <style>

        .content-wrap {
            width: 90%;
            margin: 0 auto;
            position: relative;
            background: #f5f5f5;
            height: auto;
            padding: 0 0 1rem 0;
        }
        .page-container {
            min-height: 29rem;
            min-width: 67rem;
            max-width: 67rem;
            margin: 0 auto;
            display: block;
            position: relative;
        }
        .info-bot-wrap{
            width: 100%;
            text-align:left;
            min-height: 20rem;
            position:relative;
            display: block;
            margin-top:2rem;
        }
        .info-bot-outline{
            width: 49.3%;
            height:8rem;
            text-align: center;
            display: inline-block;
            vertical-align:top;
            margin-top: 0.8rem;
            margin-left: 0.2rem;
            background: #FFFFFF;
            position: relative;
        }
        .info-bot-item{
            width: 96%;
            height:7.5rem;
            margin-top:0.3rem;
            margin-left: 0.5rem;
            position: relative;
            vertical-align: middle;
        }
        .info-bot-item:hover{
            box-shadow: -2px 3px 8px #333;
        }
        .bot-item-pic{
            width: 24.5%;
            height: 100%;
            margin-bottom: 0.2rem;
            cursor: pointer;
            vertical-align: middle;
        }
        .bot-item-pic img{
            width: 100%;
            height: 100%;
        }
        .bot-item-text{
            text-align: center;
            position: absolute;
            width: 75.5%;
            float: left;
            top:0;
            left:26%;
            cursor: pointer;
        }
        span.bot-info-title{
            float: left;
            font-size: 1rem;
            font-weight: 500;
            color:rgb(89, 89, 89);
            font-family: 'Microsoft Yahei','Helevica';
        }
        span.bot-info-time{
            font-size:0.8rem;
            float:right;
            margin:0.5rem 1rem 0 0;
            color:rgb(89, 89, 89);
            font-family: 'Microsoft Yahei','Helevica';
        }
        .bot-info-dsc{
            position: absolute;
            width: 71%;
            font-size: 0.6rem;
            line-height: 1rem;
            float: left;
            color: rgb(89, 89, 89);
            font-family: 'Microsoft Yahei','Helevica';
            text-align: left;
            top: 3rem;
            left: 20%;
            /* text-align: left; */
            text-indent: 3rem;
            /* right: 1.8rem; */
            cursor: pointer;
        }
    </style>
</head>
<body>
<jsp:include page="../portal/topmenu.jsp"></jsp:include>
<div class="page-container">
    <div class="content-wrap">
        <div class="info-bot-wrap" id="infolist">
            <div class="info-bot-outline">
                <div class="info-bot-item">
                    <div class="bot-item-pic">
                        <img src="../img/banner/rmzx-05.jpg">
                    </div>
                    <div class="bot-item-text">
                        <span class="bot-info-title">资讯标题</span>
                        <span class="bot-info-time">2017-01-01 08:00</span>
                    </div>
                    <span class="bot-info-dsc">资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.
                            资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.</span>
                </div>
            </div>
            <div class="info-bot-outline">
                <div class="info-bot-item">
                    <div class="bot-item-pic">
                        <img src="../img/banner/rmzx-05.jpg">
                    </div>
                    <div class="bot-item-text">
                        <span class="bot-info-title">资讯标题</span>
                        <span class="bot-info-time">2017-01-01 08:00</span>
                    </div>
                    <span class="bot-info-dsc">资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括</span>
                </div>
            </div>
            <div class="info-bot-outline">
                <div class="info-bot-item">
                    <div class="bot-item-pic">
                        <img src="../img/banner/rmzx-05.jpg">
                    </div>
                    <div class="bot-item-text">
                        <span class="bot-info-title">资讯标题</span>
                        <span class="bot-info-time">2017-01-01 08:00</span>
                    </div>
                    <span class="bot-info-dsc">资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括</span>
                </div>
            </div>
            <div class="info-bot-outline">
                <div class="info-bot-item">
                    <div class="bot-item-pic">
                        <img src="../img/banner/rmzx-05.jpg">
                    </div>
                    <div class="bot-item-text">
                        <span class="bot-info-title">资讯标题</span>
                        <span class="bot-info-time">2017-01-01 08:00</span>
                    </div>
                    <span class="bot-info-dsc">资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.
                            资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.</span>
                </div>
            </div>
            <div class="info-bot-outline">
                <div class="info-bot-item">
                    <div class="bot-item-pic">
                        <img src="../img/banner/rmzx-05.jpg">
                    </div>
                    <div class="bot-item-text">
                        <span class="bot-info-title">资讯标题</span>
                        <span class="bot-info-time">2017-01-01 08:00</span>
                    </div>
                    <span class="bot-info-dsc">资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.
                            资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.</span>
                </div>
            </div>
            <div class="info-bot-outline">
                <div class="info-bot-item">
                    <div class="bot-item-pic">
                        <img src="../img/banner/rmzx-05.jpg">
                    </div>
                    <div class="bot-item-text">
                        <span class="bot-info-title">资讯标题</span>
                        <span class="bot-info-time">2017-01-01 08:00</span>
                    </div>
                    <span class="bot-info-dsc">资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.
                            资讯概述，资讯主要内容的一些简要概括。资讯概述，资讯主要内容的一些简要概括.</span>
                </div>
            </div>
        </div>
        <div id="page" class="page_div"></div>
    </div>
</div>
<jsp:include page="../portal/footer.jsp"></jsp:include>
<script  id="infolist-tml" type="text/html">
    <div class="info-bot-outline"  onclick="javascript:window.location.href='${ctx}/articledetail/index/\${id}'">
        <div class="info-bot-item">
            <div class="bot-item-pic">
                <img src="\${img}">\
            </div>
            <div class="bot-item-text">
                <span class="bot-info-title">\${main_title}</span>
                <span class="bot-info-time">\${formatDate(create_time)}</span>
            </div>
            <span class="bot-info-dsc">\${sub_title}</span>
        </div>
    </div>
</script>
<script src="${ctx}/resources/portal/script/page.js"  type="text/javascript"></script>
<script>
    var keyword='${param.keyword}';
    $(function () {
        loadinfolist(1);
    })
    function  loadinfolist(pageNum) {
        var data={keyword:keyword,type:"",pageNum:pageNum,pageSize:10}
        asyncAjax({
            url: ctx + "/article/getSearchList?"+ $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#infolist").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#infolist").html("");
                        $("#infolist-tml").tmpl(res["data"]).appendTo($("#infolist"));
                        $("#page").paging({
                            pageNo:pageNum || 1,
                            totalPage:Math.ceil(res.total/10),
                            totalSize: res.total,
                            callback: function(num) {
                                loadinfolist(num);
                            }
                        })
                    }
                    else {
                        $("#infolist").html('<div class="alert alert-warning">未找到对应资讯!</div>');
                    }
                }
                else {
                    bootbox.alert(res["msg"]);
                }
            }

        })

    }
</script>
</body>
</html>